<template>
	<view class="content" style="background-color: #F4F4F4;height: 100vh;">
		<tn-nav-bar bgClass="bg-gradual-blue">
			{{ bleName }}
		</tn-nav-bar>

		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<view class="margin tn-flex tn-flex-row-center">
				<zu-battery :showPercent='true' :battery="readValue.RSOC" height='120rpx' width="300rpx"
					@click="showPasswordFun('CONFIG')"></zu-battery>
			</view>

			<view class="margin-top-lg">
				<tn-grid col="2" align="center">
					<tn-grid-item backgroundColor='#F4F4F4'>
						<view class="task-item b-card ">
							<view class="b-flex-space">
								<view class="task-item-describe">
									<view class="title b-fontw">
										电压
									</view>
									<view class="text">
										{{ readValue.Voltage }}
										<text class="text-lg" style="padding-left: 6rpx;">V</text>
									</view>
								</view>
								<image class="task-item-icon" src="/static/img/ble/dy.png" mode="">
								</image>
							</view>
						</view>
					</tn-grid-item>

					<tn-grid-item backgroundColor='#F4F4F4'>
						<view class="task-item b-card ">
							<view class="b-flex-space">
								<view class="task-item-describe">
									<view class="title b-fontw">
										电流
									</view>
									<view class="text">
										{{ readValue.CurCadc }}
										<text class="text-lg" style="padding-left: 6rpx;">A</text>
									</view>
								</view>
								<image class="task-item-icon" src="/static/img/ble/dl.png" mode="">
								</image>
							</view>
						</view>
					</tn-grid-item>
					<tn-grid-item backgroundColor='#F4F4F4'>
						<view class="task-item b-card ">
							<view class="b-flex-space">
								<view class="task-item-describe">
									<view class="title b-fontw">
										环境温度
									</view>
									<view class="text">
										{{ readValue.Temp }}
										<text class="text-lg" style="padding-left: 6rpx;">℃</text>
									</view>
								</view>
								<image class="task-item-icon" src="/static/img/ble/wd.png" mode="">
								</image>
							</view>
						</view>
					</tn-grid-item>
					<tn-grid-item backgroundColor='#F4F4F4'>
						<view class="task-item b-card ">
							<view class="b-flex-space">
								<view class="task-item-describe">
									<view class="title b-fontw">
										MOS温度
									</view>
									<view class="text">
										{{ readValue.Tmos }}
										<text class="text-lg" style="padding-left: 6rpx;">℃</text>
									</view>
								</view>
								<image class="task-item-icon" src="/static/img/ble/wd.png" mode="">
								</image>
							</view>
						</view>
					</tn-grid-item>
				</tn-grid>
			</view>

			<view class="margin">
				<view class="tn-margin-top-sm">
					<tn-list-cell :radius="true">
						<view class="list-icon-text">
							<view class="list__left">
								<view class="list__left__text">
									<text class="text-lg text-bold padding-left-sm">充电开关状态</text>
								</view>
							</view>
							<view class="list__right">
								<tn-switch activeColor="#409eff" @change='e => setMos(e, "charge")'
									v-model="readValue['PackStatus'][2].value * 1 === 1 ? true : false"></tn-switch>
							</view>
						</view>
					</tn-list-cell>
				</view>

				<view class="tn-margin-top-sm">
					<tn-list-cell :radius="true">
						<view class="list-icon-text">
							<view class="list__left">
								<view class="list__left__text">
									<text class="text-lg text-bold padding-left-sm">放电开关状态</text>
								</view>
							</view>
							<view class="list__right">
								<tn-switch activeColor="#409eff" @change='e => setMos(e, "discharge")'
									v-model="readValue['PackStatus'][1].value * 1 === 1 ? true : false"></tn-switch>
							</view>
						</view>
					</tn-list-cell>
				</view>
			</view>


			<view class="margin bg-white shadow-lg radius-25">
				<demo-title title="电芯电压">
					<tn-grid col="4" align="around">
						<tn-grid-item v-for="(item,index) in readValue['VCell']" :key="index">
							<view style="width: 100%;display: flex; justify-content: center;">
								<view class="margin-tb-sm"
									:class='item*1===readValue["Vmax"]*1?"bg-img-dc-max":item*1===readValue["Vmin"]*1?"bg-img-dc-min":"bg-img-dc"'>
									<view
										style="display: flex; justify-content: space-around;align-items: center;flex-direction: column;width: 100%;height: 100%;padding: 5px;">
										<view class="text-bold">{{item+" "}}
											<text class="text-sm"> V</text>
										</view>
										<view class="text-sm">电芯 {{index+1}}</view>
									</view>
								</view>
							</view>
						</tn-grid-item>
					</tn-grid>
				</demo-title>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProfile
	} from '@/api/modules/common.js'
	import {
		getToken
	} from "@/common/storage/auth.js"


	import BLE from "@/libs/bluetooth/BLE.js";
	import Protocol from "@/libs/protocol/baiwei/protocol.js";
	import BLE_DATA from "@/libs/protocol/baiwei/bleData.js";

	import demoTitle from '../components/demo-title.vue'
	import zuBattery from '../components/zu-battery/zu-battery.vue'

	// 读取BMS信息指令
	const CMDs = ['7F1002061257', '7F1002061158']


	let timer = null;
	let isConnectTimer = null;
	export default {
		components: {
			demoTitle,
			zuBattery
		},
		data() {
			return {
				bleName: '',
				isFirst: true,
				readIndex: 0,
				timeCount: 0,
				cmdFuns: BLE_DATA.cmdArrs,
				sendCmd: 0,
				readAllParams: [],
				readValue: {},
				deviceInfo: {},
				resData: '',
			}
		},
		onLoad(options) {
			let that = this;
			if (options.name) {
				this.bleName = options.name
			}
			for (let i = 0; i < that.cmdFuns.length; i++) {
				let items = that.cmdFuns[i].params
				items.forEach(item => {
					that.readAllParams.push({
						name: item.name,
						value: '',
						text: item.text
					})
					that.readValue[item.name] = ''
				})
			}

			console.log('that.readValue', that.readValue);
			console.log('that.readAllParams', that.readAllParams);
			//设置值更改函数
			that.SetValueChanged();
			// 获取MQTT连接信息 并开始连接服务器
			that.getMqttInfo()
			//let res = '7F10023B1201000000100010A60DEB0DC30DB90DC20DF60DEA0DE50D050EE70DE50DEC0D050EF40DE20DE40D0000021112011103007800C800C0E5'
			let res = '7F10021B11010000001400451033101D151E1E0000C201F401C0B0'
			let packages = Protocol.solutionData(res, that.readValue)

		},
		onHide() {
			this.resData = ''
			this.readIndex = 0;
		},
		onShow() {

			let that = this
			if (timer != null) {
				clearInterval(timer)
				timer = null;
			}
			// timer = setInterval(() => {
			// 	that.sendFirst(this)
			// }, 2000)


		},
		beforeDestroy() {
			clearInterval(timer)
			timer = null;
			BLE.Close()
		},
		methods: {
			sendFirst(that) {
				if (!that) {
					that = this
				}
				Protocol.sendCommand(CMDs[that.sendCmd], () => {
					console.log('第一次发送: ', CMDs[that.sendCmd]);
				})
				if (that.sendCmd < 1) {
					that.sendCmd = 1
				} else {
					that.sendCmd = 0
				}
			},
			//设置蓝牙请求数据
			SetValueChanged() {
				var that = this;
				//处理数据
				BLE.bleCallBack.CharacteristicValueChange = function(res) {
					if (res != undefined && res != null && res != '') {
						//判断返回数据是否是指令应答数据 示例：7F100207410126 / 7F 10 02 07 32 01 35
						if (res.length === 14) {
							let rCode = res.substr(10, 2)
							if ('01' === rCode) {
								that.$tn.message.toast('指令执行成功')
							}else{
								that.$tn.message.toast('指令执行失败')
							}
						} else {
							//解析蓝牙返回数据
							let packages = Protocol.solutionData(res)
						}
					}
				}
			},
			sendMsgToMqtt(num) {

			},
			getMqttInfo() {
				let that = this;

			},
			/* 断开Mqtt消息服务器 */
			async endMqtt() {
				await this.$mqttTool.end();
			},
			/* 连接Mqtt消息服务器 */
			async connectMqtt(info) {
				if (this.$mqttTool.client === null) {
					if (info && info.username) {
						await this.$mqttTool.connect(info);
					}
				}
			},
			/* Mqtt回调处理  */
			mqttCallback() {
				this.$mqttTool.client.on('message', (topic, message, buffer) => {
					console.log('message:', message.toString());
					console.log('topic:', topic);
					let topicArrs = [
						'/status/post',
						'/monitor/post',
						'/service/reply',
						'/ws/service'
					]

				});
			},
			/** Mqtt订阅主题 */
			mqttSubscribe(device) {
				// 订阅当前设备状态和实时监测
				let topics = buildTopics(device);
				this.$mqttTool.subscribe(topics);

			},
			/** Mqtt取消订阅主题 */
			mqttUnSubscribe(device) {
				let topics = buildTopics(device);
				this.$mqttTool.unsubscribe(topics);
				console.log('取消订阅', topics);
				this.$mqttTool.end();
			},
		}
	}
</script>


<style scoped lang="scss">
	.radius-25 {
		border-radius: 25rpx;
	}

	.b-card {
		margin: 26rpx 32rpx;
		padding: 25rpx;
		background-color: #FFFFFF;
		border-radius: 18rpx;
		box-shadow: 12rpx 12rpx 10rpx #a7a7a7;
	}

	.b-flex-space {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.b-fontw {
		font-weight: 600;
	}


	.task-item {

		.task-item-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.task-item-describe {
			height: 100rpx;
			width: 150rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-right: 30rpx;

			.title {
				font-size: 24rpx;
			}

			.text {
				margin-top: 20rpx;
				font-size: 46rpx;
			}
		}

	}


	.bg-img-dc-max {
		background-image: url('/static/img/ble/dx-max.png');
		background-size: 100% 100%;
		color: #13227a;
		height: 90rpx;
		width: 86px;
	}

	.bg-img-dc-min {
		background-image: url('/static/img/ble/dx-min.png');
		background-size: 100% 100%;
		height: 90rpx;
		color: #0b988f;
		width: 86px;
	}

	.bg-img-dc {
		background-image: url('/static/img/ble/dx.png');
		background-size: 100% 100%;
		height: 90rpx;
		width: 86px;
		color: #1296db;
	}


	.list__options {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}

	.list {
		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 18rpx;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}


	.tn-modal-class {
		.custom-modal-content {
			width: 100%;
			height: 100%;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.icon {
				font-size: 100rpx;
				margin-bottom: 20rpx;
				color: $tn-main-color;
			}

			.text {
				font-size: 40rpx;
			}
		}
	}
</style>